@import "variable.styl"
@import "mixin.styl"

body, html
  line-height: 1
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
  user-select: none
  -webkit-tap-highlight-color: transparent
  sc($font-small, #595961)

.wrap
  position: relative
  width: 1200px
  margin: 0 auto

::-webkit-scrollbar
  width: 0px

.w1220
  position: relative
  width: 1220px
  margin: 0 auto

.w990
  position: relative
  width: 990px
  height: 100%
  margin: 0 auto

.w990p30
  position: relative
  width: 990px
  height: 100%
  margin: 0 auto
  padding: 0 30px

.w990np
  position: relative
  width: 990px
  height: 100%
  margin: 0 auto
.w990p10
  position: relative
  width: 990px
  padding:0 10px 1px
  height: 100%
  margin: 0 auto

.dib
  display: inline-block

.fl
  float: left

.fr
  float: right

.hide
  display: none

.show
  display: block

.clearfix
  zoom: 1

.clearfix:after
  content: ''
  wh(0, 0)
  display: block
  clear: both
  overflow: hidden

.link-wrap
  position: relative
  display: inline-block
  wh(100%, 100%)
  sc($font-small, inherit)

.link
  color: $link-color
  text-decoration: none
  cursor: pointer
  transition: .4s ease

.link:hover
  color: $link-hover-color

.link-text
  color: $link-color
  text-decoration: none

.line-text-hover
  color: $vice-color
  text-decoration: none

.btn
  display: inline-block
  padding: 0 20px
  hh(40px)
  vertical-align middle
  border: 1px solid $btn-color
  sc($font-medium, $btn-color)
  outline: none
  cursor: pointer
  text-decoration: none
  br(2px)
  -webkit-transition: color .4s ease
  -moz-transition: color .4s ease
  -ms-transition: color .4s ease
  -o-transition: color .4s ease
  transition: color .4s ease

.btn-min
  hh(25px)
  padding: 0 15px
  font-size: $font-small

.btn-big
  hh(50px)
  padding:0 50px
  font-size: $font-large-x

.gradient
  background: -moz-linear-gradient(to top,#fff,#eee)
  background: -webkit-linear-gradient(to top,#fff,#eee)
  background: -ms-linear-gradient(to top,#fff,#eee)
  background: linear-gradient(to top,#fff,#eee)

.transiti
  -webkit-transition: all .4s ease
  -moz-transition: all .4s ease
  -ms-transition: all .4s ease
  -o-transition: all .4s ease
  transition: all .4s ease

.animateud
  animation: ud 1.5s infinite

.animatelr
  animation: lr 1.5s infinite

.animatelentry
  left: -100%
  animation: lentry 1s

.animaterentry
  left: 100%
  animation: rentry 1s

// 左进场
@-webkit-keyframes lentry
  0%
    left: -100%
  100%
    left: -0%
// 右进场
@-webkit-keyframes rentry
  0%
    left: 100%
  100%
    left: 0

// 上下
@-webkit-keyframes ud
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(0, 3px, 0)
  100%
    transform: translate3d(0, 0, 0)

@-moz-keyframes ud
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(0, 3px, 0)
  100%
    transform: translate3d(0, 0, 0)

@-ms-keyframes ud
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(0, 3px, 0)
  100%
    transform: translate3d(0, 0, 0)

@keyframes ud
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(0, 3px, 0)
  100%
    transform: translate3d(0, 0, 0)

// 左右
@-webkit-keyframes lr
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(3px, 0, 0)
  100%
    transform: translate3d(0, 0, 0)

@-moz-keyframes lr
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(3px, 0, 0)
  100%
    transform: translate3d(0, 0, 0)

@-ms-keyframes lr
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(3px, 0, 0)
  100%
    transform: translate3d(0, 0, 0)

@keyframes lr
  0%
    transform: translate3d(0, 0, 0)
  50%
    transform: translate3d(3px, 0, 0)
  100%
    transform: translate3d(0, 0, 0)


div.module-title
  font-size: 36px
  text-align: center
  h3
    font-size: 36px
    text-align: center

div.text
  font-size: $font-medium
  text-align: center
  p
    font-size: $font-medium
    text-align: center

.module-one
  .sb-bg
    display: inline-block
    background-image: url("./../../assets/module_one_sbg.png")
    background-repeat: no-repeat

.module-two
  .sb-bg
    display: inline-block
    background-image: url("./../../assets/module_one_sbg.png")
    background-repeat: no-repeat

.module-three
  .sb-bg
    display: inline-block
    background-image: url("./../../assets/module_three_sbg.png")
    background-repeat: no-repeat

.system
  background-position: 0 0

.website
  background-position: 0 -441px

.qr
  background-position: 0 -1674px

.app-code
  background-position: 0 -130px;

.build-app
  background-position: 0 -1222px

.send
  background-position: 0 -344px

.it
  background-position: 0 -1177px

.app
  background-position: 0 0

.active .app
  background-position: 0 -65px

.active .build-app
  background-position: 0 -1282px

.template
  background-position: 0 -1058px

.active .template
  background-position: 0 -1117px

.collect-form
  background-position: 0 -471px

.active .collect-form
  background-position: 0 -533px

.data-ana
  background-position: 0 -1554px

.active .data-ana
  background-position: 0 -1613px

.flow-entry
  background-position: 0 -723px

.active .flow-entry
  background-position: 0 -784px




// 上边距

.g-mt120
  margin-top: 120px
.g-mt100
  margin-top: 100px
.g-mt80
  margin-top: 80px
.g-mt70
  margin-top: 70px
.g-mt60
  margin-top: 60px
.g-mt50
  margin-top: 50px
.g-mt40
  margin-top: 40px
.g-mt30
  margin-top: 30px
.g-mt25
  margin-top: 25px
.g-mt20
  margin-top: 20px
.g-mt15
  margin-top: 15px
.g-mt14
  margin-top: 14px
.g-mt12
  margin-top: 12px
.g-mt10
  margin-top: 10px
.g-mt8
  margin-top: 8px
.g-mt5
  margin-top: 5px

// 下边距
.g-mb100
  margin-bottom: 100px
.g-mb80
  margin-bottom: 80px
.g-mb70
  margin-bottom: 70px
.g-mb60
  margin-bottom: 60px
.g-mb50
  margin-bottom: 50px
.g-mb40
  margin-bottom: 40px
.g-mb30
  margin-bottom: 30px
.g-mb25
  margin-bottom: 25px
.g-mb20
  margin-bottom: 20px
.g-mb15
  margin-bottom: 15px
.g-mb14
  margin-bottom: 14px
.g-mb12
  margin-bottom: 12px
.g-mb10
  margin-bottom: 10px
.g-mb8
  margin-bottom: 8px
.g-mb5
  margin-bottom: 5px


// 右边距
.g-mr100
  margin-right: 100px
.g-mr80
  margin-right: 80px
.g-mr70
  margin-right: 70px
.g-mr60
  margin-right: 60px
.g-mr50
  margin-right: 50px
.g-mr40
  margin-right: 40px
.g-mr30
  margin-right: 30px
.g-mr25
  margin-right: 25px
.g-mr20
  margin-right: 20px
.g-mr15
  margin-right: 15px
.g-mr14
  margin-right: 14px
.g-mr12
  margin-right: 12px
.g-mr10
  margin-right: 10px
.g-mr8
  margin-right: 8px
.g-mr5
  margin-right: 5px

// 左边距
.g-ml100
  margin-left: 100px
.g-ml80
  margin-left: 80px
.g-ml70
  margin-left: 70px
.g-ml60
  margin-left: 60px
.g-ml50
  margin-left: 50px
.g-ml40
  margin-left: 40px
.g-ml30
  margin-left: 30px
.g-ml25
  margin-left: 25px
.g-ml20
  margin-left: 20px
.g-ml15
  margin-left: 15px
.g-ml14
  margin-left: 14px
.g-ml12
  margin-left: 12px
.g-ml10
  margin-left: 10px
.g-ml8
  margin-left: 8px
.g-ml5
  margin-left: 5px



